<!-- 配餐模式 -->
<template>
  <div class="content">
    <div class="content-bottom">
      <div class="formBox" style="margin-bottom:20px">
        <cusButton type="primary" @onClick="onAdd()" ghost>添加</cusButton>
      </div>
      <div class="tableBox">
        <cusTable border :loading="loading" :columns="columns" :data="data"  :bottomClass="['cus-page']">
          <template slot-scope="{ row }" slot="isMo">
            <i-switch
              v-model="row.checkStatus"
              :true-value="1"
              :false-value="0"
              @on-change="
                value => {
                  changeSwitch(row);
                }
              "
              :loading="row.loading"
            >
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          </template>
          <template slot-scope="{ row }" slot="isSystem">
            <div>
              {{ row.isSystemMode == 0 ? "否" : "是 (系统模式不可删除)" }}
            </div>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <div class="flex">
              <cus-button
                type="text"
                size="small"
                :style="{ color: '#1E6FFF', padding: '0 8px' }"
                @onClick="onEdit(row)"
              >
                编辑
              </cus-button>
              <Poptip
                confirm
                transfer
                placement="left"
                :title="`是否确认删 ${row.modeName} 除该配餐模式 ？`"
                @on-ok="onDelete(row)"
              >
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: '#FF4746', padding: '0 8px' }"
                  v-if="row.isSystemMode == 0"
                >
                  删除
                </cus-button>
              </Poptip>
            </div>
          </template>
        </cusTable>
        <div style="width: 100%;display: flex;justify-content: flex-end">
          <cus-page
            :data="pages"
            class="mt_10"
            @pageChange="searchCateringModeListApi"
          ></cus-page>
        </div>
      </div>
    </div>
    <!-- 添加 编辑 配餐模式 -->
    <addCateringMode
      ref="addCateringMode"
      @freshGrid="freshGrid"
    ></addCateringMode>
  </div>
</template>

<script>
import {
  searchCateringModeList,
  cateringModeDelete,
  settingDefaultCateringModel
} from "@/api/business/dishesModule";
import addCateringMode from "./components/addCateringMode";
export default {
  components: { addCateringMode },
  data() {
    return {
      loading: false,
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center"
        },
        {
          title: "配餐模式",
          key: "modeName",
          align: "center"
        },
        {
          title: "是否默认",
          slot: "isMo",
          align: "center"
        },
        {
          title: "是否系统模式",
          slot: "isSystem",
          align: "center"
        },
        {
          title: "创建人",
          key: "createName",
          align: "center"
        },
        {
          title: "更新时间",
          key: "updateTime",
          align: "center"
        },
        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
    };
  },
  mounted() {
    this.searchCateringModeListApi();
    window.addEventListener("resize", this.resizeHandle, true);
  },
  methods: {
    freshGrid() {
      this.searchCateringModeListApi();
    },
    // 初始化
    onInit() {},
    // 添加
    onAdd() {
      this.$refs["addCateringMode"].form.modeId = 0;
      this.$refs["addCateringMode"].show();
    },
    // 删除
    onDelete(row) {
      cateringModeDelete({
        modeId: row.modeId
      }).then(res => {
        if (res.retCode == 2000) {
          this.$Message.success("删除成功.");
          this.searchCateringModeListApi();
        }
      });
    },
    // 编辑
    onEdit(row) {
      // this.$refs['addCateringMode'].form.id = row.id;
      this.$refs["addCateringMode"].form.modeName = row.modeName;
      this.$refs["addCateringMode"].form.modeId = row.modeId;
      this.$refs["addCateringMode"].show();
    },
    // 获取列表接口 --接口
    searchCateringModeListApi() {
      return new Promise(resolve => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize
        };
        this.loading = true;
        searchCateringModeList(params).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data;
            this.pages.pageTotal = res.total;
            resolve();
          }
        });
      });
    },
    changeSwitch(row) {
      row.loading = true;
      settingDefaultCateringModel({ modeId: row.modeId }).then(res => {
        this.searchCateringModeListApi();
        if (res.retCode == 2000) {
          this.$Message.success("默认配餐模式设置成功");
        }
      });
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeHandle, true);
  }
};
</script>
<style scoped>
/deep/.ivu-input-icon {
  height: 40px !important;
  line-height: 40px !important;
}
</style>
<style lang="less" scoped>
.content {
  // padding: 20px;
  &-bottom {
    background: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
    padding: 20px;
  }
}

.formBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.mr_20 {
  margin-right: 20px;
}

.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
